<template>
  <el-dialog
    class="select-goods-dialog"
    v-model="visible"
    destroy-on-close
    append-to-body
    align-center
    width="800px"
    @close="handleClose"
  >
    <template #header>
      <div class="dialog-header">{{props.title}}</div>
    </template>
    <DialogContent
      :multiple="props.multiple"
      :source="props.source"
      :store_list="props.store_list"
      :select_goods_list="props.select_goods_list"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang='ts'>
  import {reactive, ref, computed, watch, onMounted, provide, toRaw} from "vue"
  import {useRouter, useRoute} from "vue-router"
  import StoreList from './components/StoreList.vue'
  import GoodsList from './components/GoodsList.vue'
  import DialogContent from './components/DialogContent.vue'
  import lodash from 'lodash'

  interface Props{
    modelValue: boolean
    title: string
    multiple: boolean
    source: Array<number>
    store_list: Array<number>
    select_goods_list: Array<any>
  }

  const props = withDefaults(defineProps<Props>(),{
    modelValue: false,
    title: '素材库选择',
    multiple: true,
    source: () => [],
    store_list: () => [],
    select_goods_list: () => []
  })

  let selectList = reactive<Array<any>>([])

  const emit = defineEmits(['update:modelValue', 'select'])

  const visible = computed({
    get(){
      return props.modelValue
    },
    set(val){
      emit('update:modelValue', val)
    }
  })

  const getSelectedList = (arr: any[]) => {
    selectList.splice(0)
    selectList.push(...arr)
  }
  provide('getSelectedList', getSelectedList)

  const save = () => {
    emit('select', lodash.cloneDeep(selectList))
    handleClose()
  }

  const handleClose = () => {
    selectList.splice(0)
    emit('update:modelValue', false)
  }

</script>

<style lang="scss">
  .select-goods-dialog{
    .el-dialog__body{
      padding: 0;
    }
  }
</style>

<style lang="scss" scoped>
  $height: 500px;
  .select-goods-dialog{
    .dialog-content{
      display: flex;
      padding: 8px 0;
      .content-left{
        width: 180px;
        height: $height;
        padding: 0 6px;
        .content-left-scrollbar{
          height: $height;
        }
      }
      .content-right{
        flex: 1;
        height: $height;
        padding: 0 10px;
        border-left: 1px solid #eee;
      }
    }
  }

</style>
